织梦cmsvue之封装多个组件调用同一接口的案例
console.log(data); //
};
4、如在多个页面都需要使用 nameList ， 以在某一个页面使用为例，其余页面一样用法
</script>
// getName.js
});
}
this.$store.dispatch('geName')
}
}
} else {
total: 0,
},
在页面使用：
}
<template>method: 'get',
nameList() {
let opt = {
current: 1,
</template>
all = res.data.value || [];
},
return all;
<script>}
return {
state.nameList= payload;
export default {
}
}
let opt = {
export function getAll(callback) {actions: {
state[prop] = newState[prop]
mounted() {
pageSize: 2,
tipInfo(err.data.desc, '提示', false, 'warning');
使用promise进行封装
$http是在axios基础 进行封装的，是一个异步的方法，所以在组件中调用getAll()方法，拿到的是一个空数组
getNameList ({}).then(res => {
}
context.commit("setState", { isLoading: true })
},
}
使用回调函数进行封装
url: 'all/teacher',
});
}
},
$http(opt);
modules: {
Message.error(res.message);
console.log(data); // 成功拿到数据
};
export default {
}
import movieService from '../services/movieService.js' mounted() { //远程获取数据}
// 调用
},
return new Promise((resolve, reject) => {
state: {
</el-select>
import getNamefrom "./modules/getName";.then(data => {
reject(err.data.desc);
success: res => {
mutations: {
total: datas.length,
})
这篇文章主要介绍了vue之封装多个组件调用同一接口的案例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
$http(opt);
context.commit("setState", resp)
<script>
async getMovie(id) {
changeNameList(state, payload) {
export default {
}
fail: err => {
.then(resp => resp.json())
tipInfo(err.data.desc, '提示', false, 'warning');
actions: {
method: 'get',
this.tipInfo(err.data.desc, '提示', false, 'warning');
geName(context) {
export default {
datas: [],
};
let all = [];
.catch(err => {
context.commit("changeNameList", res.data);
export default new Vuex.Store({
fail: err => {
export default {
import { getNameList } from "@/apis/apis"; // 导入接口
},
for (const prop in newState) {
mutations: { //改变状态的通用方法 设置整个状态
getAll()
})
},
computed: {
success: res => {
movieService.getMovies(context.state.current, context.state.pageSize).then(resp => {
getName
}
}
return this.$store.state.getName.nameList
isLoading: false
},
console.log(getAll()); // []
直接return 接口调用的结果
$http(opt);
比如打开页面首页的时候，在mounted里面就 dispatch 触发geName函数
第一种： 调接口不传参数
1、在 store文件夹下的 modules文件夹下新建 getName.js
resolve(res.data.value || []);
// 调用
}
</div>
});
});
},
}
}
getAllPark(data => {
setState(state, newState) {
let opt = {
<el-select v-model="form.name" placeholder="请选择名称" clearable>
url: 'all/teacher',
};
return datas.find(item => item._id === id)
});
以上这篇vue之封装多个组件调用同一接口的案例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。
datas: datas.slice((page - 1) * pageSize, page * pageSize) //返回分页的电影数据
context.commit("setState", { isLoading: false })
if (res.code == 0) {
第二种： 调接口传参数
},
fail: err => {
}
},
nameList: [] // 名称列表
fetch(context) { // 根据当前的分页设置，获取电影
2、在 store文件夹下 index.js 中引入 getName.js
url: 'all/teacher',
state: {
callback(res.data.value || []);
// 在 movieService.jsnamespaced: true,
使用promise进行封装后，方法，不够简洁，达不到优化的目的
<el-option v-for="item in nameList" :key="item.id" :label="item.fieldName" :value="item.fieldName"></el-option>
}
export function getAll() {.then(resp => resp.json())
method: 'get',
<div>
背景：项目中有多个组件调用同一接口，为提高代码可维护性，需要封装公共方法
async getMovies(page, pageSize) {
3、在整个项目刚开始加载的时候就是用 dispatch 分发，这样就不管在哪个页面需要使用到都可以使用
console.log(resp)
//通过id获取电影数据
},
const datas = await fetch("https://api.myjson.com/bins/15f8x1")
}
success: res => {
this.$store.dispatch("movie/fetch") //出发vuex中movie.js里的action，获取数据
补充知识：vue多个页面用到同一个接口的数据（ 比如名称列表 ），使用 vuex
const datas = await fetch("https://api.myjson.com/bins/15f8x1")
export function getAll() {相关热词： 调用
本站内容来源于网络，如有侵权请与我们联系，我们会及时删除，我们深感抱歉！
注：本站所有信息仅供用于网络技术学习参考,学习中请遵循相关法律法规！
本文地址: https://v30.fanwenzhu.com/jz/wp/5187.shtml
相关文章
热门TAG
win10 ecshop 主机 阿里云 解决 配置 C# C++ 解析 SQL语句 命令 Go语言 方法 CSS3 HTML5 CSS win7 MSSQL 服务器配置 IIS7.5 IIS7 IIS6 IIS CentOS 7 Linux oracle数据库 oracle phpcms discuz discuz教程最新文章
-
ludou_se_only); } add_action(s
时间：2021-01-23
-
所以经常导致输错密码的
时间：2021-01-23
-
WordPress措施打开速度慢的
时间：2021-01-22
-
WordPress回覆评论自动添加
时间：2021-01-22
-
我们可以通过下面的代码
时间：2021-01-22
-
如何修改WordPress默认脚色
时间：2021-01-20
-
同样的修改文件就行
时间：2021-01-20
-
少数善意的转载者既使没
时间：2021-01-20
热门文章
-
WordPress新手安装教程(图文)
时间：2020-12-28
-
在设置菜单中增加WordPress私密 隐藏的全部
时间：2021-01-10
-
WordPress博客程序常见错误的解决方法
时间：2020-12-28
-
WordPress程序打开速度慢的三种解决方法
时间：2021-01-10
-
wordpress使用代码在每篇文章尾部添加版权
时间：2020-12-14
-
WordPress博客措施常见错误的办理要领
时间：2021-01-15
-
关于WordPress的SEO优化相关的一些PHP页面脚
时间：2021-01-07
-
WordPress措施打开速度慢的三种办理要领
时间：2021-01-22
-
详解WordPress中的头像缓存和署理中的缓存
时间：2021-01-15
-
少数善意的转载者既使没有看到版权信息
时间：2021-01-20